Vue实现选项卡切换，tab切换

2023-08-31 21:29| 来源: 网络整理| 查看: 265

1、实现tab切换就是单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确）

2、第一种方法效果图

这个没什么可说的，直接看代码吧（两种方式）

2、第一种完整代码（下边这段代码是我在网上学的）

Document button { width: 40px; height: 30px; text-align: center; border: none; cursor: pointer; } .active { background: red; color: #fff; border: none; } * { margin: 0; padding: 0; list-style: none; } #app { width: 600px; height: 600px; border: 1px solid #b3b3b3; margin: auto; } ul { height: 50px; background-color: #b6b6b6; color: #000; display: flex; justify-content: space-between; align-items: center; } ul li { width: 150px; text-align: center; line-height: 50px; font-size: 18px; } #app div { padding: 10px; font-size: 18px; } .active { background-color: #00557F; color: #fff; } {{item[index]}} {{val}} /* 运用知识点： v-for v-on,简写@ v-bind简写: v-show 思路：循环数据，当点击时候，把key传到changes方法中，然后num赋值给active 循环数组，只要box中key等于num就让它显示出来 */ new Vue({ el: '#app', data: { item: ["html", "css", "javascript", "Vue"], //导航栏标题 cont: ["html内容", "css内容", "javascript内容", "Vue内容"], //内容 num: 0 }, methods: { changes(key) { this.num = key; } } });

3、第二种方式效果图

4、第二种方式完整代码

.active{ color: firebrick; } html css javascript html内容 css内容 javascript内容 new Vue({ el:"#app", data:{ // 当前索引（显示的索引，需要添加class的索引） num:1, }, })

【本文地址】

公司简介

联系我们